<template>
<!-- 登录 -->
    <div class="background_login" style="height:100vh;">
        <div style="text-align:center;">
            <span class="title">幸运大抽奖管理平台</span>
        </div>
        <!-- 登录 -->
        <div class="dv_content flex-center">   
            <van-form @submit="onSubmit" style="margin-top:0vh; width: 100%;">
                <van-field class="vanbcell"
                    v-model="username"
                    name="username"
                    label=""
                    border
                    placeholder="请输入手机号码"
                    clearable
                    :rules="userTel"
                >
                <template #left-icon>
                    <van-icon name="phone-o" size="25" color="#A2A2A2" />
                </template>
                </van-field>
                <van-field class="vanbcell" style="margin-top:20px;"
                    v-model="password"
                    name="password"
                    show-password
                    :right-icon="!passwordStatus?'closed-eye':'eye-o'"
                    label=""
                    placeholder="请输入密码"
                    :type="!passwordStatus?'password':'text'"
                    @click-right-icon="passwordStatus=!passwordStatus"
                    :rules="[{ required: true, message: '请输入密码' }]"
                >
                <template #left-icon>
                    <van-icon name="lock"  size="25" color="#AAA" />
                </template>
                </van-field>
                <div class="btn-class">
                    <van-button  v-show="subShow" round block size="normal" type="info" native-type="submit">登录</van-button>
                    <van-button v-show="subShowGo" loading round block size="normal" disabled type="info" loading-text="登录中..."></van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script>
export default {
    name: "",
    data() {
        return {
            username: '',
            password: '',
            passwordStatus: false,  //密码显影
            subShowGo: false,
            subShow: true,
            userTel: [
                {
                    required: true,
                    message: "请输入手机号码",
                    trigger: "onBlur"
                },
                {
                    validator: value => {
                        return /^1[23456789]\d{9}$/.test(value);
                    },
                    message: "请输入正确格式的手机号码"
                }
            ]
        }
    },
    created() {},
    mounted() {
    },
    methods:{
        onSubmit(values) {
            console.log(values);
            this.subShowGo = true
            this.subShow = false
            let params = values
            console.log(params, 'login');
            setTimeout(()=>{
                this.subShowGo = false
                this.subShow = true
            },3000)
        }
    }
}
</script>
<style>
    .background_login{
        background-image: url("../../assets/image/back.png") !important;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .dv_content{
        width:90%;
        margin: 0 auto;
        height: 50%;
        border-radius: 10px;
        padding:15px;
        background-color: rgba(255,255,255,0.5);
        text-align: center;
    }
    .title{
        font-size: 28px;
        color: white;
        font-family:"微软雅黑", "Dosis", sans-serif;
        text-align: center;
        font-weight: bold;
        line-height:160px;
        text-transform:uppercase;
        position: relative;
        color:#fefefe;
        text-shadow:
        0px 1px 0px #c0c0c0,
        0px 2px 0px #b0b0b0,
        0px 3px 0px #a0a0a0,
        0px 4px 0px #909090,
        0px 5px 10px rgba(0, 0, 0, 0.6);
    }
    .register {
        position: relative;
        top: -10vh;;
        text-align: center;
    }
    .vanbcell {
        position: relative;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 16px;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 24px;
    }
    .van-cell{
        background-color: transparent;
    }
    .butn {
        color: black;
    }
    .btn-class{
        margin: 45px auto 0 auto;
    }
    .van-cell::after {
        border-bottom: 1px solid rgb(177, 177, 177);
    }
    .van-field__control::placeholder {
        color: #8b8b8b;
        font-size: 14px;
        /* font-weight: bold; */
    }
    .van-button--info {
        color: #fff;
        background-color: #6995D2;
        border: 1px solid #6995D2;
    }
</style>
    